<template>
  <div class="login-scan-container">
    <iframe v-if="src" :src="src" frameborder="0" height="400px" width="300px"></iframe>
  </div>
</template>

<script setup lang="ts" name="loginScan">
import { ref, onMounted, nextTick } from 'vue'
import { isDevelopment } from '@/utils'

// 定义变量内容
const src = ref('')

// 初始化生成二维码
const initQrcode = () => {
  nextTick(() => {
    const url = isDevelopment ? 'http://nm.hzwima.com:8000' : location.origin
    src.value = `${url}/auth/get_pc_epwx_qrcode`
  })
}

// 页面加载时
onMounted(() => {
  initQrcode()
})
</script>

<style scoped lang="scss">
.login-scan-animation {
  opacity: 0;
  animation-name: error-num;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.login-scan-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  @extend .login-scan-animation;
  animation-delay: 0.1s;

  :deep(img) {
    margin: auto;
  }

  .login-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-placeholder);
    @extend .login-scan-animation;
    animation-delay: 0.2s;
  }
}
</style>
